<template>
	<view class="container">
		<navBar :title="t('address.edit')"></navBar>
		<!-- 城市选择和搜索框 -->
		<view class="header">
			<view class="">
				<view @click="openPicker=true" style="display: flex;">
					<p class="city">{{pickerValue?pickerValue:'Plese select'}}</p><tn-icon name='down'></tn-icon>
				</view>
				<uni-search-bar @confirm="search" v-model="searchValue" @blur="blur" @cancel="cancelSearch"
					:placeholder="t('common.placeholder')">
				</uni-search-bar>
			</view>
		</view>
		<tn-picker v-model="pickerValue" v-model:open="openPicker" :data="pickerData" @change='slectCity'
			indicator-height='88' mask @confirm='confirmSlectCity'></tn-picker>
		<!-- 附近地址部分 -->
		<view class="nearby-address">
			<view class="">
				<view class="nearby-title">
					<text>{{t('address.NearbyAddress')}}</text>
					<uni-button class="position-btn" type="error" @click="reposition">

					</uni-button>
				</view>

				<!-- 地址列表 -->
				<view v-for="(address, index) in addressList" class="address-list"
					@click="selectAddress(address,index)">
					<view class="address-list-left">
						<view class="address-list-iconBox">
							<image src="/static/location/1.png" mode="" class="address-list-icon"></image>
						</view>
						<view class="address-list-detail">
							{{address}}
						</view>
					</view>
					<view class="address-list-default" v-if="index==choseLocation">
						<image src="../../static/location/icon.png" mode="" style="width: 22rpx;height: 22rpx;"></image>
						{{t('address.default')}}
					</view>
				</view>
			</view>
		</view>
		<view class="default-location">
			<view class="title">
				{{t('address.addressDetails')}}
			</view>
			<tn-input type='textarea' cursor-spacing='50' maxlength='100'
				:placeholder="t('common.placeholder')"></tn-input>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		XMLParser
	} from "fast-xml-parser";

	import {
		data
	} from "../../json/output"
	import navBar from "../../components/navBar/index.vue"
	import {
		useI18n
	} from 'vue-i18n'

	const {
		t
	} = useI18n()
	console.log(data);
	const pickerValue = ref('')
	const searchValue = ref('')
	const pickerData = ref(data)
	const openPicker = ref(false)
	const choseLocation = ref('')
	const addressList = ref([
		'Ocean International Center',
		'Ocean International Center',
		'Ocean International Center',
		'Ocean International Center',
		'Ocean International Center',
	]);
	// 取消搜索
	const cancelSearch = () => {
		searchText.value = '';
	};
	const search = () => {

	}
	const blur = () => {

	}
	const slectCity = (e, val) => {
		console.log(e, val);
	}
	const confirmSlectCity = (e, val) => {
		console.log(e, val);
		if (!val[2]) {
			pickerValue.value = val[0].label
			return
		}
		pickerValue.value = val[2].label
	}

	// 重新定位
	const reposition = () => {
		console.log('Repositioning...');
		// 实际中这里可以调用定位 API
	};

	// 选择地址
	const selectAddress = (address, index) => {
		console.log('Selected Address:', address);
		choseLocation.value = index
	};
</script>

<style scoped lang="less">
	.container {
		/* padding: 20px; */
	}

	.header {
		margin-top: 60rpx;
		margin-bottom: 20px;
		background-color: #fff;

		>view {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.title {
		font-size: 30rpx;
		font-weight: 500;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.city {
		max-width: 162rpx;
		height: 32rpx;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
	}

	.uni-searchbar {
		flex: 1;
	}

	.city-picker {
		flex-grow: 1;
	}

	.city-text {
		font-size: 16px;
		color: #333;
	}

	.search-input {
		flex-grow: 2;
		margin-left: 10px;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.cancel-btn {
		margin-left: 10px;
	}

	.nearby-address {
		margin-top: 20px;
		background-color: #fff;

		>view {
			padding: 20rpx;
		}
	}

	.nearby-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.position-btn {
		font-size: 12px;
	}

	.uni-list-item {
		margin-bottom: 10px;
	}

	:deep(.tn-picker) {
		height: 50vh;
	}

	:deep(.tn-picker__content) {
		height: 100%;
	}

	.address-list {
		display: flex;
		height: 88rpx;
		align-items: center;
		border-bottom: 2rpx solid #EEEEEE;
		width: 100%;
		justify-content: space-between;

		.address-list-left {
			display: flex;
			align-items: center;

			.address-list-iconBox {
				.address-list-icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 20rpx;
				}
			}

			.address-list-detail {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
			}
		}
	}


	.address-list-default {
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FD2D55;
		line-height: 28rpx;
	}

	.default-location {
		background-color: white;
		padding: 20rpx;
		margin-top: 30rpx;
	}
</style>